<script>

    function toScroll(event){
//                    alert(event.srcElement.scrollLeft);
        document.getElementById('grid-head').scrollLeft =  document.getElementById('grid-foot').scrollLeft = (event.target || event.srcElement).scrollLeft;
    }
</script>
<div class="grid" id="testgrid">
    <style id="testgrid-cols">
        .testgrid-col-1{ width:100px; }
        .testgrid-col-2{ width:100px; }
        .testgrid-col-3{ width:100px; }
        .testgrid-col-4{ width:200px; }
        .testgrid-col-5{ width:150px; }
        .testgrid-col-6{ width:200px; }
        .testgrid-col-7{ width:200px; }
        .testgrid-col-8{ width:200px; }
        .testgrid-col-9{ width:100px; }
        .testgrid-col-0-2 {width:240px}
    </style>
    <div class="grid-head" id="grid-head">
        <table class="table-head">
            <tbody>
            <tr>
                <th class="grid-col-checkbox">
                    <div class="form-clickbox">
                        <i class="fi"></i>
                    </div>
                </th>
                <th class="testgrid-col-1">
                    <span>操作</span>
                    <button class="btn"><i class="fi fi-set"></i></button>
                </th>
                <th class="testgrid-col-2">
                    <div class="grid-head-sort">
                        <button class="btn"><span class="caret caret-up selected"></span></button>
                        <button class="btn"><span class="caret caret-down"></span></button>
                    </div>
                    <span>head</span>
                </th>
                <th class="testgrid-col-3">head</th>
                <th class="testgrid-col-4">head</th>
                <th class="testgrid-col-5">head</th>
                <th class="testgrid-col-6">head</th>
                <th class="testgrid-col-7">head</th>
                <th class="testgrid-col-8">head</th>
                <th class="testgrid-col-9">head</th>
                <th class="table-scroll-space"></th>
            </tr>
            </tbody>
        </table>
        <!--<div class="table-scroll-head-space">-->
        <!--</div>-->
    </div>
    <div class="grid-body" id="grid-body" onscroll="toScroll(event)">
        <table class="table-body" id="table-body">
            <tbody>
            <tr>
                <td class="grid-col-checkbox">
                    <div class="form-clickbox">
                        <i class="fi"></i>
                    </div>
                </td>
                <td class="testgrid-col-1">
                    <button class="btn"><i class="fi fi-del"></i></button>
                    <button class="btn"><i class="fi fi-set"></i></button>
                    <button class="btn"><i class="fi fi-edit"></i></button>
                </td>
                <td editable="true" class="testgrid-col-2"><input type="text" value="文本框" class="form-text"></td>
                <td editable="true" class="testgrid-col-3"><div class="form-dorpdown">
                    <input type="text" class="form-text">
                    <a type="button" class="btn dropdown-toggle">
                        <i class="fi fi-caret"></i>
                    </a>
                    <ul class="dropdown-menu">
                        <li selected="true"><a href="#"><i class="fi fi-checkbox"></i>Action</a></li>
                        <li><a href="#"><i class="fi fi-checkbox"></i>Another action</a></li>
                        <li><a href="#"><i class="fi fi-radiobox"></i>Something else here</a></li>
                        <li selected="true"><a href="#"><i class="fi fi-radiobox"></i>Separated link</a></li>
                    </ul>
                </div></td>
                <td editable="true" class="testgrid-col-4"> <div class="form-numberbox">
                    <a class="btn"><i class="fi fi-add"></i></a><input type="text" value="123" class="form-text"><a class="btn"><i class="fi fi-minus"></i></a>
                </div></td>
                <td editable="true" class="testgrid-col-5"><div class="form-time">
                    <input type="text" class="form-text">
                    <a type="button" class="btn">
                        <i class="fi fi-time"></i>
                    </a>

                    <div class="dropdown-menu">
                        <div class="form-time-set">
                            <a class="btn"><i class="fi fi-arrow-up"></i></a>
                            <input type="text">
                            <a class="btn"><i class="fi fi-arrow-down"></i></a>
                        </div>
                        <div class="form-time-split">:</div>
                        <div class="form-time-set">
                            <a class="btn"><i class="fi fi-arrow-up"></i></a>
                            <input type="text">
                            <a class="btn"><i class="fi fi-arrow-down"></i></a>
                        </div>
                    </div>
                </div></td>
                <td editable="true" class="testgrid-col-6"> <div class="form-date">
                    <input type="text" class="form-text">
                    <a type="button" class="btn">
                        <i class="fi fi-date"></i>
                    </a>

                    <div class="dropdown-menu">
                        <div class="form-date-yearmonth">
                            <a class="btn"><span class="arrow-right"></span></a>
                            <div class="form-date-year"><input type="text" class="form-text" value="2015">
                                <ul class="dropdown-menu" style="display: block">
                                    <li><a>2014</a></li>
                                    <li><a>2015</a></li>
                                    <li><a>2016</a></li>
                                    <li><a>2017</a></li>
                                    <li><a>2018</a></li>
                                    <li><a>2019</a></li>
                                    <li><a>2020</a></li>
                                    <li><a>2021</a></li>
                                    <li class="form-date-years-close">
                                        <a class="btn"><span class="arrow-right"></span></a>
                                        <a class="btn"><i class="fi fi-close-small"></i></a>
                                        <a class="btn"><span class="arrow-left"></span></a>
                                    </li>
                                </ul>
                            </div>
                            <div class="form-date-month">12月</div>
                            <a class="btn"><span class="arrow-left"></span></a>
                        </div>
                        <div class="form-date-days">
                            <table>
                                <tbody><tr>
                                    <th>日</th>
                                    <th>一</th>
                                    <th>二</th>
                                    <th>三</th>
                                    <th>四</th>
                                    <th>五</th>
                                    <th>六</th>
                                </tr>
                                <tr>
                                    <td>01</td>
                                    <td>02</td>
                                    <td>03</td>
                                    <td>04</td>
                                    <td>05</td>
                                    <td>06</td>
                                    <td>07</td>
                                </tr>
                                <tr>
                                    <td selected="true">08</td>
                                    <td>09</td>
                                    <td>10</td>
                                    <td>11</td>
                                    <td>12</td>
                                    <td>13</td>
                                    <td>14</td>
                                </tr>
                                <tr>
                                    <td>15</td>
                                    <td>16</td>
                                    <td>17</td>
                                    <td>18</td>
                                    <td>19</td>
                                    <td>20</td>
                                    <td>21</td>
                                </tr>
                                <tr>
                                    <td>22</td>
                                    <td>23</td>
                                    <td>24</td>
                                    <td>25</td>
                                    <td>26</td>
                                    <td>27</td>
                                    <td>28</td>
                                </tr>
                                <tr>
                                    <td>29</td>
                                    <td>30</td>
                                    <td>31</td>
                                    <td>01</td>
                                    <td>02</td>
                                    <td>03</td>
                                    <td>04</td>
                                </tr>
                                </tbody></table>
                        </div>

                        <div class="form-date-bar">
                            <a class="btn">确定</a>
                            <div class="form-date-time"><input type="text" class="form-text"><span>:</span><input type="text" class="form-text"></div>
                            <a class="btn">清除</a>
                        </div>
                    </div>
                </div></td>
                <td class="testgrid-col-7"> <div class="form-clickbox" selected="true">
                    <i class="fi"></i>
                    <label>复选框</label>
                </div></td>
                <td class="testgrid-col-8">body</td>
                <td class="testgrid-col-9">body</td>
            </tr>
            <tr>
                <td class="grid-col-checkbox">
                    <div class="form-clickbox">
                        <i class="fi"></i>
                    </div>
                </td>
                <td class="testgrid-col-1">body</td>
                <td class="testgrid-col-2">body</td>
                <td class="testgrid-col-3">body</td>
                <td class="testgrid-col-4">body</td>
                <td class="testgrid-col-5">body</td>
                <td class="testgrid-col-6">body</td>
                <td class="testgrid-col-7">body</td>
                <td class="testgrid-col-8">body</td>
                <td class="testgrid-col-9">body</td>
            </tr> <tr>
                <td class="grid-col-checkbox">
                    <div class="form-clickbox">
                        <i class="fi"></i>
                    </div>
                </td>
                <td class="testgrid-col-1">body</td>
                <td class="testgrid-col-2">body</td>
                <td class="testgrid-col-3">body</td>
                <td class="testgrid-col-4">body</td>
                <td class="testgrid-col-5">body</td>
                <td class="testgrid-col-6">body</td>
                <td class="testgrid-col-7">body</td>
                <td class="testgrid-col-8">body</td>
                <td class="testgrid-col-9">body</td>
            </tr> <tr>
                <td class="grid-col-checkbox">
                    <div class="form-clickbox">
                        <i class="fi"></i>
                    </div>
                </td>
                <td class="testgrid-col-1">body</td>
                <td class="testgrid-col-2">body</td>
                <td class="testgrid-col-3">body</td>
                <td class="testgrid-col-4">body</td>
                <td class="testgrid-col-5">body</td>
                <td class="testgrid-col-6">body</td>
                <td class="testgrid-col-7">body</td>
                <td class="testgrid-col-8">body</td>
                <td class="testgrid-col-9">body</td>
            </tr> <tr>
                <td class="grid-col-checkbox">
                    <div class="form-clickbox">
                        <i class="fi"></i>
                    </div>
                </td>
                <td class="testgrid-col-1">body</td>
                <td class="testgrid-col-2">body</td>
                <td class="testgrid-col-3">body</td>
                <td class="testgrid-col-4">body</td>
                <td class="testgrid-col-5">body</td>
                <td class="testgrid-col-6">body</td>
                <td class="testgrid-col-7">body</td>
                <td class="testgrid-col-8">body</td>
                <td class="testgrid-col-9">body</td>
            </tr> <tr>
                <td class="grid-col-checkbox">
                    <div class="form-clickbox">
                        <i class="fi"></i>
                    </div>
                </td>
                <td class="testgrid-col-1">body</td>
                <td class="testgrid-col-2">body</td>
                <td class="testgrid-col-3">body</td>
                <td class="testgrid-col-4">body</td>
                <td class="testgrid-col-5">body</td>
                <td class="testgrid-col-6">body</td>
                <td class="testgrid-col-7">body</td>
                <td class="testgrid-col-8">body</td>
                <td class="testgrid-col-9">body</td>
            </tr> <tr>
                <td class="grid-col-checkbox">
                    <div class="form-clickbox">
                        <i class="fi"></i>
                    </div>
                </td>
                <td class="testgrid-col-1">body</td>
                <td class="testgrid-col-2">body</td>
                <td class="testgrid-col-3">body</td>
                <td class="testgrid-col-4">body</td>
                <td class="testgrid-col-5">body</td>
                <td class="testgrid-col-6">body</td>
                <td class="testgrid-col-7">body</td>
                <td class="testgrid-col-8">body</td>
                <td class="testgrid-col-9">body</td>
            </tr> <tr>
                <td class="grid-col-checkbox">
                    <div class="form-clickbox">
                        <i class="fi"></i>
                    </div>
                </td>
                <td class="testgrid-col-1">body</td>
                <td class="testgrid-col-2">body</td>
                <td class="testgrid-col-3">body</td>
                <td class="testgrid-col-4">body</td>
                <td class="testgrid-col-5">body</td>
                <td class="testgrid-col-6">body</td>
                <td class="testgrid-col-7">body</td>
                <td class="testgrid-col-8">body</td>
                <td class="testgrid-col-9">body</td>
            </tr> <tr>
                <td class="grid-col-checkbox">
                    <div class="form-clickbox">
                        <i class="fi"></i>
                    </div>
                </td>
                <td class="testgrid-col-1">body</td>
                <td class="testgrid-col-2">body</td>
                <td class="testgrid-col-3">body</td>
                <td class="testgrid-col-4">body</td>
                <td class="testgrid-col-5">body</td>
                <td class="testgrid-col-6">body</td>
                <td class="testgrid-col-7">body</td>
                <td class="testgrid-col-8">body</td>
                <td class="testgrid-col-9">body</td>
            </tr> <tr>
                <td class="grid-col-checkbox">
                    <div class="form-clickbox">
                        <i class="fi"></i>
                    </div>
                </td>
                <td class="testgrid-col-1">body</td>
                <td class="testgrid-col-2">body</td>
                <td class="testgrid-col-3">body</td>
                <td class="testgrid-col-4">body</td>
                <td class="testgrid-col-5">body</td>
                <td class="testgrid-col-6">body</td>
                <td class="testgrid-col-7">body</td>
                <td class="testgrid-col-8">body</td>
                <td class="testgrid-col-9">body</td>
            </tr> <tr>
                <td class="grid-col-checkbox">
                    <div class="form-clickbox">
                        <i class="fi"></i>
                    </div>
                </td>
                <td class="testgrid-col-1">body</td>
                <td class="testgrid-col-2">body</td>
                <td class="testgrid-col-3">body</td>
                <td class="testgrid-col-4">body</td>
                <td class="testgrid-col-5">body</td>
                <td class="testgrid-col-6">body</td>
                <td class="testgrid-col-7">body</td>
                <td class="testgrid-col-8">body</td>
                <td class="testgrid-col-9">body</td>
            </tr> <tr>
                <td class="grid-col-checkbox">
                    <div class="form-clickbox">
                        <i class="fi"></i>
                    </div>
                </td>
                <td class="testgrid-col-1">body</td>
                <td class="testgrid-col-2">body</td>
                <td class="testgrid-col-3">body</td>
                <td class="testgrid-col-4">body</td>
                <td class="testgrid-col-5">body</td>
                <td class="testgrid-col-6">body</td>
                <td class="testgrid-col-7">body</td>
                <td class="testgrid-col-8">body</td>
                <td class="testgrid-col-9">body</td>
            </tr> <tr>
                <td class="grid-col-checkbox">
                    <div class="form-clickbox">
                        <i class="fi"></i>
                    </div>
                </td>
                <td class="testgrid-col-1">body</td>
                <td class="testgrid-col-2">body</td>
                <td class="testgrid-col-3">body</td>
                <td class="testgrid-col-4">body</td>
                <td class="testgrid-col-5">body</td>
                <td class="testgrid-col-6">body</td>
                <td class="testgrid-col-7">body</td>
                <td class="testgrid-col-8">body</td>
                <td class="testgrid-col-9">body</td>
            </tr>
            </tbody></table>
    </div>
    <div class="grid-foot" id="grid-foot">
        <table class="table-foot">

            <tbody><tr>
                <th colspan="3" class="testgrid-col-0-2">
                    合计：
                </th>
                <th class="testgrid-col-3">foot</th>
                <th class="testgrid-col-4">foot</th>
                <th class="testgrid-col-5">foot</th>
                <th class="testgrid-col-6">foot</th>
                <th class="testgrid-col-7">foot</th>
                <th class="testgrid-col-8">foot</th>
                <th class="testgrid-col-9">foot</th>
                <th class="table-scroll-space"></th>
            </tr>
            </tbody></table>
    </div>

</div>